<html>

<head>
	<title>打开小程序</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
	<script>
		window.onerror = e => {
			console.error(e)
			alert('发生错误' + e)
		}
	</script>
	<!-- weui 样式 -->
	<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css">
	</link>
	<!-- 公众号 JSSDK -->
	<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	<!-- 云开发 Web SDK -->
	<script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
	<script>
		const innContent = `
		<template>
            <button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button>
          </template>
		`

		// 获取url上的参数
		function hdSearch() {
			let real = location.search.split("=");
			try {
				real = JSON.parse(decodeURIComponent(real[1]));
			} catch (error) {
				real = ''
			}
			return real
		}
		// 生成微信浏览器扫描的信息
		function cteMp(info) {
			// 初始化
			wx.config({
				appId: info.appid, // <!-- replace -->
				timestamp: 0, // 必填，填任意数字即可
				nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
				signature: 'signature', // 必填，填任意非空字符串即可
				jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
				openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
			})


			const btn = document.getElementById(info.eleId); //获取元素
			const html = `<wx-open-launch-weapp style="width:100%;display:block;" username="${info.ghid}" path="${info.url}">${info.content}</wx-open-launch-weapp>`;
			btn.innerHTML = html; // html字符串赋值

			// 点击按钮 正常跳转触发
			btn.addEventListener("launch", function (e) {
				console.log("success");
			});
			// 点击跳转 抛出异常
			btn.addEventListener("error", function (e) {
				console.log("fail", e.detail);
				alert(`跳转异常 - ${e.detail}`)
			});


		}

		function docReady(fn) {
			if (document.readyState === 'complete' || document.readyState === 'interactive') {
				fn()
			} else {
				document.addEventListener('DOMContentLoaded', fn);
			}
		}

		docReady(async function () {
			var ua = navigator.userAgent.toLowerCase()
			var isWXWork = ua.match(/wxwork/i) == 'wxwork'
			var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
			var isMobile = false
			var isDesktop = false
			if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
				isMobile = true
			} else {
				isDesktop = true
			}

			if (isWeixin) {
				// 微信扫二维码

				// 放开微信的显示区域
				var containerEl = document.getElementById('wechat-web-container')
				containerEl.classList.remove('hidden')
				containerEl.classList.add('full', 'wechat-web-container')
				// 获取url参数
				const urlPm = hdSearch()
				cteMp({
					// 元素id
					eleId: "nsnn",
					// 跳转小程序的页面路径
					url: urlPm.path + '?' + urlPm.query,
					// 自定义的html内容
					content: innContent,
					appid: 'wx01c6917d5d1dc6e7',
					ghid: 'gh_5aa77b495d97'
				})
			} else if (isDesktop) {
				// 在 pc 上则给提示引导到手机端打开
				var containerEl = document.getElementById('desktop-web-container')
				containerEl.classList.remove('hidden')
				containerEl.classList.add('full', 'desktop-web-container')
			} else {
				// 手机浏览器扫二维码
				var containerEl = document.getElementById('public-web-container')
				containerEl.classList.remove('hidden')
				containerEl.classList.add('full', 'public-web-container')
				var c = new cloud.Cloud({
					// 必填，表示是未登录模式
					identityless: true,
					// 资源方 AppID
					resourceAppid: 'wx01c6917d5d1dc6e7',
					// 资源方环境 ID
					resourceEnv: 'cloud1-1ggcv3455c399089',
				})
				await c.init()
				window.c = c

				var buttonEl = document.getElementById('public-web-jump-button')
				var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
				try {
					await openWeapp(() => {
						buttonEl.classList.remove('weui-btn_loading')
						buttonLoadingEl.classList.add('hidden')
					})
				} catch (e) {
					buttonEl.classList.remove('weui-btn_loading')
					buttonLoadingEl.classList.add('hidden')
					throw e
				}
			}
		})

		async function openWeapp(onBeforeJump) {
			var c = window.c
			/**
			 * 获取地址栏上的参数
			 * 		urlPm格式:
			 * 					 {
											query: "proId=1138",
											path: "/subPackages/ticket/booking/detail/detail",
											env: 'release',
											isExpire: false,
											expireTime: parseInt(Date.now() / 1000 + 60 * 60)
									}
			*/
			const urlPm = hdSearch()
			const res = await c.callFunction({
				name: 'skpMp',
				data: {
					action: 'getUrlScheme',
					options: urlPm
				},
			})
			console.warn(res)
			if (onBeforeJump) {
				onBeforeJump()
			}

			location.href = res.result.openlink
		}
	</script>
	<style>
		.hidden {
			display: none;
		}

		.full {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.public-web-container {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.public-web-container p {
			position: absolute;
			top: 40%;
		}

		.public-web-container a {
			position: absolute;
			bottom: 40%;
		}

		.wechat-web-container {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.wechat-web-container p {
			position: absolute;
			top: 40%;
		}

		.wechat-web-container wx-open-launch-weapp {
			position: absolute;
			bottom: 40%;
			left: 0;
			right: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.desktop-web-container {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.desktop-web-container p {
			position: absolute;
			top: 40%;
		}
	</style>
</head>

<body>
	<div class="page full">
		<!-- 手机浏览器 -->
		<div id="public-web-container" class="hidden">
			<p class="">正在打开 “西岸生活”...</p>
			<a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading"
				onclick="openWeapp()">
				<span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i
						class="weui-primary-loading__dot"></i></span>
				打开小程序
			</a>
		</div>
		<!-- 微信浏览器 -->
		<div id="wechat-web-container" class="hidden">
			<p class="">点击以下按钮打开 “西岸生活”</p>
			<div id="nsnn"></div>
		</div>
		<!-- pc端 -->
		<div id="desktop-web-container" class="hidden">
			<p class="">请在手机打开网页链接</p>
		</div>
	</div>
</body>

</html>